{% extends "base/base.html" %}

{% block extralmedias %}
<title>测字闯关</title>
<style type="text/css">
    body{
        background: url('../static/images/bg{{passnum}}.png') no-repeat;
        background-size: 100% 100%;
    }
</style>
{% endblock %}

{% block content %}
<div class="main">
    <div class="header"><button id="back"></button><button id="next"></button></div>
    <div class="title"></div>
    <div class="head_div"><div class="head{{passnum}}"></div></div>
    <div class="logo_div"><div class="logo"></div></div>
    <div class="center_div">
        <ul class="word_list">
            {% for item in words %}
            <li><div><span id="word_{{forloop.counter|add:-1}}" style="display: none;">{{item}}</span></div></li>
            {% endfor %}
        </ul>
    </div>
    <div class="footer"><button id="no"></button><button id="yes"></button></div>
</div>

<script type="text/javascript">
    var passnum = {{passnum}};
    var checknum = {{checknum}};
    var page = {{page}}+1;
    var num = {{num}};
    var words = {{words|safe}};
    var i = 0;
    $('#word_0').show(1000);
    $('#next').click(function(){
        if(num==page-1){
            if(passnum<4){
                passnum += 1;
                window.location.href = '?name={{name}}&phone={{phone}}&page=1&checknum='+checknum+'&passnum='+passnum;
            }else{
                window.location.href = '/end/?name={{name}}&phone={{phone}}&checknum='+checknum;
            }
        }else{
            $('.word_list span').each(function(){
                if($(this).hasClass('yes')){
                    checknum += 1;
                }
            })
            window.location.href = '?name={{name}}&phone={{phone}}&page='+page+'&checknum='+checknum+'&passnum='+passnum;
        }
    })
    $('#back').click(function(){
        history.back();
    })
    $('#yes').click(function(){
        if(i<words.length-1){
            $('#word_'+i).addClass('yes');
            i++;
            $('#word_'+i).show(1000);
        }else{
            $('#next').trigger('click');
        }
    })
    $('#no').click(function(){
        if(i<words.length-1){
            $('#word_'+i).addClass('no');
            i++;
            $('#word_'+i).show(1000);
        }else{
            $('#next').trigger('click');
        }
    })
</script>
{% endblock %}
